<!-- src/views/Login.vue -->
<template>
  <div class="login-container">
    <div class="login-header">
      <h2>用户登录</h2>
      <p>请输入您的账号和密码</p>
    </div>
    <div id="loginContent">
      <div v-if="loading" class="text-center">
        <div class="spinner"></div>
        <p>正在检查登录状态...</p>
      </div>
      <div v-else>
        <form v-if="!isLoggedIn" id="loginForm" @submit.prevent="handleLogin">
          <div class="form-group">
            <label for="userName">用户名</label>
            <input
                id="userName"
                v-model="loginForm.userName"
                required
                type="text"
            />
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input
                id="password"
                v-model="loginForm.password"
                required
                type="password"
            />
          </div>
          <button class="login-btn" type="submit">登录</button>
        </form>
        <div v-else class="message info">
          <h3>您已经登录</h3>
          <p>
            用户名: <strong>{{ userInfo.userName }}</strong>
          </p>
          <p>
            用户ID: <strong>{{ userInfo.id }}</strong>
          </p>
          <div style="margin-top: 20px">
            <button class="btn" @click="goToHome">前往系统主页</button>
            <button
                class="btn btn-outline-secondary"
                style="margin-top: 10px"
                @click="performLogout"
            >
              退出登录
            </button>
          </div>
        </div>
        <div v-if="message" id="message">
          <div :class="['message', message.type]">{{ message.text }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {checkLoginStatus, login, logout} from "@/utils/api.js";

export default {
  name: "Login",
  data() {
    return {
      loading: true,
      isLoggedIn: false,
      userInfo: null,
      loginForm: {
        userName: "admin",
        password: "admin123",
      },
      message: null,
    };
  },
  mounted() {
    this.checkLoginStatus();
  },
  methods: {
    async checkLoginStatus() {
      try {
        const response = await checkLoginStatus();
        if (response && response.success && response.data) {
          this.isLoggedIn = true;
          this.userInfo = response.data;
        } else {
          // 明确处理未登录状态，不抛出异常
          this.isLoggedIn = false;
        }
      } catch (error) {
        // 未登录或检查失败时显示登录表单
        this.isLoggedIn = false;
      } finally {
        this.loading = false;
      }
    },
    async handleLogin() {
      try {
        const response = await login(this.loginForm);
        if (response.success) {
          this.message = {type: "success", text: response.message};
          // 登录成功，跳转到主页
          setTimeout(() => {
            this.$router.push("/");
          }, 1000);
        } else {
          this.message = {type: "error", text: response.message};
        }
      } catch (error) {
        this.message = {type: "error", text: "登录失败: " + error.message};
      }
    },
    goToHome() {
      this.$router.push("/");
    },
    async performLogout() {
      try {
        await logout();
        this.isLoggedIn = false;
        this.userInfo = null;
      } catch (error) {
        this.isLoggedIn = false;
        this.userInfo = null;
      }
    },
  },
};
</script>

<!-- 在<style>标签中修改路径 -->
<style scoped>
@import "../assets/css/pages/login.css";
</style>
